<style lang="less">
.shiftIn{
  .productDetailBox {
    width: 100%;
    height: 3.4rem;
    background-color: #3d477b;
    color: #fff;
    h3 {
      padding: .3rem .3rem 0;
      height: .6rem;
      font-size: .28rem;
    }
    .chart {
      margin-top: .3rem;
      padding: 0 .14rem .3rem;
      display: flex;
      .item {
        flex: 1;
        padding: 0 .16rem;
        border-right: 1px solid #bfbfbf;
        strong {
          // todo 此处需要用到 PingFang-SC-Bold 字体
          display: block;
          font-weight: normal;
          font-size: .4rem;
        }
        span {
          display: block;
          font-size: .2rem;
        }
      }
      :last-child {
        border-right: 0 none;
      }
      & .red {
        color: #f63;
      }
    }
    .chartInfo {
      padding: .1rem .3rem 0;
      dfn {
        position: relative;
        display: block;
        height: .16rem;
        background-color: rgba(255,255,255,.5);
        border-radius: .04rem;
        i {
          position: absolute;
          width: 2.4rem;
          height: .16rem;
          border-radius: .04rem;
          background-color: rgba(255,255,255,1);
        }
      }
      p {
        margin-top: .2rem;
        font-size: .2rem;
      }
    }
  }
  .detailInfo {
    margin-top: .2rem;
    padding: 0 .3rem .2rem;
    background-color: #fff;
    h2 {
      font-size: .3rem;
      line-height: .8rem;
      border-bottom: 1px solid #eaeaea;
      font-weight: bold;
    }
    .detailMain {
      padding: .16rem 0;
      dl {
        display: flex;
        line-height: .6rem;
        dt {
          width: 2.2rem;
          color: #999;
        }
        dd {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
  .testT{
    width: 50px;
    height: 20px;
    background-color: blue;
  }
}
</style>
<template>
  <div class="dy-main shiftIn">
    <!-- <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">产品详情</x-header> -->
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">产品详情</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x style= 'height: 100%;'>
          <div class="scroller-box">
            <div class="productDetailBox">
              <h3>{{financialData.name}}</h3>
              <div class="chart">
                <div class="item red">
                  <strong>{{financialData.rate}}</strong>
                  <span>参考市值</span>
                </div>
                <div class="item">
                  <strong>{{financialData.profit}}</strong>
                  <span>最新单位净值</span>
                </div>
                <div class="item">
                  <strong>{{financialData.term}}</strong>
                  <span>风险等级</span>
                </div>
              </div>
              <div class="chartInfo">
                <dfn class="progressBar">
                  <i></i>
                </dfn>
                <p>可购剩余额度 {{financialData.availableCredit}}元 可购总额度 {{financialData.totalAmountOfPurchase}}元</p>
              </div>
            </div>
            <div class="detailInfo">
              <h2>产品介绍</h2>
              <div class="detailMain">
                <dl>
                  <dt>产品代码</dt>
                  <dd>{{financialData.list.subTime}}</dd>
                </dl>
                <dl>
                  <dt>产品管理人</dt>
                  <dd>{{financialData.list.productName}}</dd>
                </dl>
                <dl>
                  <dt>产品币种</dt>
                  <dd>{{financialData.list.productType}}</dd>
                </dl>
                <dl>
                  <dt>计价币种</dt>
                  <dd>{{financialData.list.currency}}</dd>
                </dl>
                <dl>
                  <dt>最低购买金额</dt>
                  <dd>{{financialData.list.deliveryTime}}</dd>
                </dl>
                <dl>
                  <dt>产品到期日期</dt>
                  <dd>{{financialData.list.expireTime}}</dd>
                </dl>
                <dl>
                  <dt>最低购买金额</dt>
                  <dd>{{financialData.list.minBuyMoney}}</dd>
                </dl>
                <dl>
                  <dt>递增金额</dt>
                  <dd>{{financialData.list.increaseMoney}}</dd>
                </dl>
                <dl>
                  <dt>是否保本</dt>
                  <dd>{{financialData.list.saveBook}}</dd>
                </dl>
                <dl>
                  <dt>风险等级</dt>
                  <dd>{{financialData.list.RiskGrade}}</dd>
                </dl>
                <dl>
                  <dt>最新产品市值</dt>
                  <dd>{{financialData.list.newrate}}</dd>
                </dl>
                <dl>
                  <dt>分红方式</dt>
                  <dd>{{financialData.list.RiskGrade_1}}</dd>
                </dl>
                <dl>
                  <dt>手续费率</dt>
                  <dd>{{financialData.list.RiskGrade_1}}</dd>
                </dl>
              </div>
            </div>
            <x-button class="subBtn" type="primary" action-type="button" @click.native='gotoNext()'>{{buttonTxt}}</x-button>
          </div>
        </scroller>
      </div>
    </div>
    <div class="testT">ceshi</div>
  </div>
</template>

<script>
import { Confirm, Group, XSwitch, XButton } from 'vux'
export default {
  components: {
    Confirm,
    Group,
    XSwitch,
    XButton
  },
  data () {
    return {
      financialData: {
        name: '“芙蓉锦程.汇得益”2018年24号', // 理财产品名
        rate: '7.7777', // 参考市值
        profit: '11.222', // 最新单位净值
        term: '高', // 风险等级
        availableCredit: '20,000.00', // 可购剩余额度
        totalAmountOfPurchase: '100,000.00', // 可购总额度
        list: {
          subTime: '123234', // 产品代码
          productName: '会得以', // 产品管理人
          productType: '债券型', // 产品币种
          currency: '人民币', // 计价币种
          deliveryTime: '5678', // 最低购买金额
          expireTime: '2017/08/01', // 产品到期日期
          minBuyMoney: '3806', // 最低购买金额
          increaseMoney: '1000', // 递增金额
          saveBook: '否', // 是否保本
          RiskGrade: '1级', // 风险等级
          newrate: '7.2341', // 最新产品市值
          RiskGrade_1: '现金分红' // 风险等级
        }},
      buttonTxt: '购买111' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    back () {
      // alert('6789')
      this.$publicFun.goBack(this)
    },
    getFinancialData () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'showProDetail', 'basic_Data': {'productId': '3015'}}
        }),
        function (response) {
          LVm.aaa = JSON.stringify(response)
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    gotoNext () {
      // alert('click')
      this.$router.push({name: 'PropertyToBuy'})
    },
    showPlugin () {
      this.$vux.confirm.show({
        title: 'Title',
        content: 'Content',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
        }
      })
    },
    showPlugin2 () {
      this.showPlugin()
    }
  },
  created () {
    this.getFinancialData()
  }
}
</script>
